<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
      当前帐户： 尊敬的<span style="color: #337ab7"> ${ adminUser.username } </span>您好，您可以
    <a style="color: #405bd1; text-decoration: none;" href="./customerList.jsp">返回客户列表</a>|<a href="../index.jsp" style="color: #405bd1; text-decoration: none;">退出当前账户</a><br/>
    <p class="shou">添加客户信息</p>
    <hr width="100%" color="#808080" size="1"/>
      <p style="text-align: center; color: red;" >${msg}</p>
      <div align="center">*
          <el-form ref="form" :rules="rules" status-icon :model="form" label-width="80px" style="width: 400px;margin-top: 80px;" class="demo-form">
              <el-form-item label="客户名称" prop="cname">
                  <el-input v-model="form.cname" style="width: 300px;"  placeholder="请输入您的名称"></el-input>
              </el-form-item>

              <el-form-item label="客户性别" prop="sex">
                  <el-radio-group v-model="form.sex">
                      <el-radio label="1">男</el-radio>
                      <el-radio label="2">女</el-radio>
                  </el-radio-group>
              </el-form-item>

              <el-form-item label="客户生日" prop="date">
                  <el-date-picker type="date" placeholder="年/月/日" v-model="form.date" style="width: 300px;"></el-date-picker>
              </el-form-item>

              <el-form-item label="客户余额" prop="yue">
                  <el-input v-model="form.yue" style="width: 300px;" placeholder="请输入您的余额"></el-input>
              </el-form-item>

              <el-form-item label="客户爱好" prop="type">
                  <el-checkbox-group v-model="form.type">
                      <el-checkbox label="1" >篮球</el-checkbox>
                      <el-checkbox label="2" >足球</el-checkbox>
                      <el-checkbox label="3" >排球</el-checkbox>
                      <el-checkbox label="4" >棒球</el-checkbox>
                  </el-checkbox-group>
              </el-form-item>

              <el-form-item label="客户级别" prop="region">
                  <el-select style="width: 300px;" v-model="form.region" placeholder="请选择客户级别">
                      <el-option label="青铜级别" value="1"></el-option>
                      <el-option label="白银级别" value="2"></el-option>
                      <el-option label="黄金级别" value="3"></el-option>
                      <el-option label="钻石级别" value="4"></el-option>
                  </el-select>
              </el-form-item>

              <el-form-item label="验证码" prop="yan">
                  <el-input v-model="form.yan" style="width: 200px;" name="checkCode" placeholder="请输入您的验证码"></el-input>
                  <img src="${pageContext.request.contextPath}/sys/generateCheckCode" width="90px" id="checkCodeId" @click="changeImg()" align="absmiddle">
              </el-form-item>
          </el-form>
          <el-button type="primary" @click="submitForm('form')" style="width: 400px;">添加客户信息</el-button>
      </div>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
          return {
              visible: false,
              form:{
                  cname:'',
                  sex: '',
                  date: '',
                  yue:'',
                  type: [],
                  region: '',
                  yan: ''
              },
              rules: {
                  cname: [
                      { required: true, message: '请输入客户名称', trigger: 'blur' },
                      { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                  ],
                  sex: [
                      { required: true, message: '请选择性别', trigger: 'change' }
                  ],
                  date: [
                      { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                  ],
                  yue:[
                      { required: true, message: '请输入客户名称', trigger: 'blur' }
                  ],
                  type: [
                      { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }
                  ],
                  region: [
                      { required: true, message: '请选择客户级别', trigger: 'change' }
                  ],
                  yan: [
                      { required: true, message: '请填写验证码', trigger: 'blur' },
                      {min: 4 ,max: 4,message: '验证码长度为4',trigger: 'blur'}
                  ]
              }
          }
      },
        methods: {
            changeImg(){
                document.getElementById("checkCodeId").src = "${pageContext.request.contextPath}/sys/generateCheckCode?time="+new Date().getTime();
            },
            submitForm(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        var that=this;
                        axios.request('/ssm_biao7/customer/add',{params:{
                                cname:that.form.cname,
                                gender:that.form.sex,
                                birthday:that.form.date,
                                love:that.form.type.toString(),
                                clevel:that.form.region,
                                balance:that.form.yue,
                                checkCode:that.form.yan
                            }}).then(function (result) {
                            window.location=result.data
                        })
                    } else {
                        console.log('error submit!!');
                    }
                });
            }
        }
    })
  </script>
    <style scoped>
        .shou{
            margin-top: 50px;
            font-size: 45px;
            text-align: center;
            color: #474646;
        }
    </style>
</html>